<!--
 * @author: Kate-sy
 * @create: 2021-06-23 19:51 PM
 * @license: MIT
 * @lastAuthor: Kate-sy
 * @lastEditTime: 2021-06-30 20:07 PM
 * @desc: 
-->
<template>
  <div class="content-contaner">
    <div class="de-wrap">
      <div class="anth">
        <div class="anth-pho">
          <img :src="data.icon" alt="" />
          <div class="anth-name">
            <article>{{ data.nick_name }}</article>
            <section>
              掘金
              <div class="point"></div>
              <span>{{ data.updated_at }}</span>
            </section>
          </div>
        </div>
        <div
          class="atten"
          ref="attentint"
          @click="attent(data.user_id, 'attentint')"
          v-if="attstate"
        >
          关注
        </div>
        <div
          class="ratten"
          ref="rattentint"
          @click="attent(data.user_id, 'rattentint')"
          v-if="!attstate"
        >
          已关注
        </div>
      </div>
      <div class="cont-wrap">
        <div class="content" v-html="wr(data.info)"></div>
      </div>
    </div>
    <div class="pra">
      <div class="praise">
        <svg
          t="1624343705331"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="7934"
          width="16"
          height="16"
          @click="look"
        >
          <path
            d="M223.3 519.7v400h-100v-400h100m40-40h-180v480h180v-480z m230.8-375.4c2.5 0 5.2 0.1 8 0.4 35.6 3.5 60.9 15.1 77.2 35.6 11.4 14.3 18.9 33.5 22.2 57.2 2.8 20.1 2.6 42.8-0.5 67.6-6.5 50.3-7.6 90.6-3.2 119.8 8.1 54.6 36.6 66.4 52.9 68.6 4.8 0.6 9.9 1 15.8 1 16.9 0 37.8-2.7 61.9-5.7 28.6-3.6 60.9-7.8 90.6-7.8 44.8 0 63.6 9.6 71.5 17.7 2.7 2.8 10.9 11.2 10.2 36.3-0.6 21.4-2.3 41.8-4 61.5-1.7 19.9-3.3 38.8-3.6 57.2-1.6 103.4-6.6 154.9-17.9 183.7-21.9 55.9-47.6 69.8-83.1 89-4.8 2.6-9.7 5.2-14.7 8.1-29 16.3-64.5 18.7-83.1 18.7-10 0-16.5-0.7-17.3-0.8l-2.1-0.3h-2.5l-409.2-1.8V539.7c36.5-17.5 100.9-57 148-133.8 36.6-59.7 41-131.1 44.9-194.1 2.2-35.7 4.3-69.5 12.3-90.1 2.6-6.6 5.5-11.2 8.7-13.5 3.6-2.6 9.3-3.9 17-3.9m0-40c-119.9 0-43.3 200.5-116.9 320.6C316.4 484.2 223.3 513 223.3 513v437.2l449 2s8.6 1.1 22.1 1.1c24.9 0 66.6-3.6 102.7-23.9 42.6-24 84.8-39.1 115.4-117.3 14-35.7 19-92.4 20.6-197.7 0.5-34.8 6.4-73.9 7.5-118.3 2-77.2-56.2-95.1-121.7-95.1-56.9 0-119.3 13.5-152.5 13.5-3.9 0-7.4-0.2-10.4-0.6-16.4-2.2-28.4-42.9-15.4-143.7 9.6-74.2 2.1-192-134.7-205.3-4.1-0.4-8.1-0.6-11.8-0.6z"
            fill="#86909c"
            p-id="7935"
          ></path></svg
        >361
      </div>
      <div class="tock">
        <svg
          t="1624344834578"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="28041"
          width="16"
          height="16"
          @click="look"
        >
          <path
            d="M691.4048 850.7904A329.8304 329.8304 0 0 1 650.24 870.4a384 384 0 1 1 216.9856-212.1728l-1.536 3.584c-5.376 12.5952-10.752 22.8864-14.1824 28.672-10.496 19.3536-13.3632 47.104-7.168 67.328l37.7856 122.4192c2.304 7.5776 5.6832 4.1472-1.8432 1.8432l-122.4192-37.7856c-19.968-6.144-47.616-3.4304-66.4064 6.5024z m173.7216 80.1792c47.0016 14.4896 80.2816-19.0976 65.8432-65.8432l-37.7344-122.368a44.2368 44.2368 0 0 1 2.816-27.0848c3.9936-6.7584 10.2912-18.8416 16.64-33.6384l1.8432-4.3008a435.2 435.2 0 1 0-231.5776 234.496c13.9776-6.1952 25.7536-12.3392 33.1776-16.5888a45.2096 45.2096 0 0 1 26.624-2.4064l122.368 37.7344z"
            fill="#86909c"
            p-id="28042"
          ></path>
        </svg>
        <div class="tri"></div>
        330
      </div>
      <div class="sher">
        <svg
          t="1624345296745"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1212"
          width="16"
          height="16"
          @click="look"
        >
          <path
            d="M665.6 243.2c-6.4 0-12.8 0-12.8-6.4l-134.4-128h-12.8L371.2 243.2c-6.4 6.4-19.2 6.4-25.6 0s-6.4-19.2 0-25.6l134.4-134.4c19.2-19.2 44.8-19.2 64 0l134.4 134.4c6.4 6.4 6.4 19.2 0 25.6h-12.8z"
            fill="#86909c"
            p-id="1213"
          ></path>
          <path
            d="M512 678.4c-12.8 0-19.2-6.4-19.2-19.2V96c0-12.8 6.4-19.2 19.2-19.2s19.2 6.4 19.2 19.2v556.8c0 12.8-6.4 25.6-19.2 25.6z"
            fill="#86909c"
            p-id="1214"
          ></path>
          <path
            d="M819.2 960H204.8C128 960 64 902.4 64 832V448c0-70.4 64-128 140.8-128H384c12.8 0 19.2 6.4 19.2 19.2s-6.4 19.2-19.2 19.2H204.8c-57.6 0-102.4 38.4-102.4 89.6v384c0 51.2 44.8 89.6 102.4 89.6h614.4c57.6 0 102.4-38.4 102.4-89.6V448c0-51.2-44.8-89.6-102.4-89.6h-153.6c-12.8 0-19.2-6.4-19.2-19.2s6.4-19.2 19.2-19.2h153.6C896 320 960 377.6 960 448v384c0 70.4-64 128-140.8 128z"
            fill="#86909c"
            p-id="1215"
          ></path>
        </svg>
        分享
      </div>
    </div>
    <div class="discuss-wrap">
      <div class="dis-top">
        <section>评论</section>
      </div>
      <div class="impot">
        <div class="im-left">
          <img
            src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/e30559a8dc5b1a0ea4b8b2a485d34018.svg"
            alt=""
          />
        </div>
        <div class="im-right">
          <div
            class="input"
            contenteditable="true"
            @click="input"
            ref="int"
            placeholder="输入评论..."
            @blur="plint($event)"
            @input="onepl"
          ></div>
          <div class="expr" v-show="pl">
            <div class="ex-left">
              <div class="smail" @click="addemj">
                <img
                  src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/5594dbb510a36a6453e2d9a67d13f5ff.svg"
                  alt=""
                />表情
                <div class="emjion" v-show="emion">
                  <span
                    :key="item"
                    v-for="item in emio"
                    v-on:click.stop="itemj($event)"
                  >
                    {{ item }}</span
                  >
                </div>
              </div>
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                @click="adpic"
              >
                <svg
                  data-v-e284b7c0=""
                  aria-hidden="true"
                  width="20"
                  height="20"
                  viewBox="0 0 22 22"
                  class="icon image-icon"
                >
                  <g data-v-e284b7c0="" fill="none" fill-rule="evenodd">
                    <path data-v-e284b7c0="" d="M1 1h20v20H1z"></path>
                    <g data-v-e284b7c0="" transform="translate(2 3)">
                      <path
                        data-v-e284b7c0=""
                        stroke="#027FFF"
                        stroke-width=".9"
                        d="M2.28.667h13.44c1.075 0 1.947.871 1.947 1.946v10.774a1.947 1.947 0 0 1-1.947 1.946H2.28a1.947 1.947 0 0 1-1.947-1.946V2.613c0-1.075.872-1.946 1.947-1.946zM.333 12.499L5 8l9.01 7.333m-6.343-4.842L10.333 8l7.136 5.914"
                      ></path>
                      <circle
                        data-v-e284b7c0=""
                        cx="13.5"
                        cy="4.5"
                        r="1.5"
                        fill="#027FFF"
                      ></circle>
                    </g>
                  </g>
                </svg>
                图片
              </el-upload>
            </div>
            <div class="ex-right">
              <span>Ctrl or ⌘ + Enter</span>
              <button @click="plitem" ref="oneplbtn">评论</button>
            </div>
          </div>
        </div>
      </div>
      <!-- 评论的每一条 -->
      <div
        class="dis-item"
        :key="item.comment_info"
        v-for="(item, ine) in pingldata"
      >
        <!-- 第一个评论 -->
        <div class="dis-first">
          <div class="f-left">
            <img
              src="https://sf6-ttcdn-tos.pstatp.com/img/user-avatar/c6dd3a46c2617f8ed005bca541f49aef~300x300.image"
              alt=""
            />
          </div>
          <div class="f-right">
            <div class="f-r-top">
              <div class="dis-anthar">{{ item.nick_name }}</div>
              <div class="lev">Lv{{ item.status }}</div>
              <div class="dia-tag"></div>
            </div>
            <div class="f-r-mid">{{ item.comment_info }}</div>
            <div class="f-r-end">
              <span>{{ item.created_at }}</span>
              <div class="end-icon">
                <div class="praise">
                  <svg
                    t="1624343705331"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="7934"
                    width="16"
                    height="16"
                    @click="look"
                  >
                    <path
                      d="M223.3 519.7v400h-100v-400h100m40-40h-180v480h180v-480z m230.8-375.4c2.5 0 5.2 0.1 8 0.4 35.6 3.5 60.9 15.1 77.2 35.6 11.4 14.3 18.9 33.5 22.2 57.2 2.8 20.1 2.6 42.8-0.5 67.6-6.5 50.3-7.6 90.6-3.2 119.8 8.1 54.6 36.6 66.4 52.9 68.6 4.8 0.6 9.9 1 15.8 1 16.9 0 37.8-2.7 61.9-5.7 28.6-3.6 60.9-7.8 90.6-7.8 44.8 0 63.6 9.6 71.5 17.7 2.7 2.8 10.9 11.2 10.2 36.3-0.6 21.4-2.3 41.8-4 61.5-1.7 19.9-3.3 38.8-3.6 57.2-1.6 103.4-6.6 154.9-17.9 183.7-21.9 55.9-47.6 69.8-83.1 89-4.8 2.6-9.7 5.2-14.7 8.1-29 16.3-64.5 18.7-83.1 18.7-10 0-16.5-0.7-17.3-0.8l-2.1-0.3h-2.5l-409.2-1.8V539.7c36.5-17.5 100.9-57 148-133.8 36.6-59.7 41-131.1 44.9-194.1 2.2-35.7 4.3-69.5 12.3-90.1 2.6-6.6 5.5-11.2 8.7-13.5 3.6-2.6 9.3-3.9 17-3.9m0-40c-119.9 0-43.3 200.5-116.9 320.6C316.4 484.2 223.3 513 223.3 513v437.2l449 2s8.6 1.1 22.1 1.1c24.9 0 66.6-3.6 102.7-23.9 42.6-24 84.8-39.1 115.4-117.3 14-35.7 19-92.4 20.6-197.7 0.5-34.8 6.4-73.9 7.5-118.3 2-77.2-56.2-95.1-121.7-95.1-56.9 0-119.3 13.5-152.5 13.5-3.9 0-7.4-0.2-10.4-0.6-16.4-2.2-28.4-42.9-15.4-143.7 9.6-74.2 2.1-192-134.7-205.3-4.1-0.4-8.1-0.6-11.8-0.6z"
                      fill="#86909c"
                      p-id="7935"
                    ></path></svg
                  >12
                </div>
                <div class="tock" @click="firre(item, ine)">
                  <svg
                    t="1624344834578"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="28041"
                    width="16"
                    height="16"
                    @click="look"
                  >
                    <path
                      d="M691.4048 850.7904A329.8304 329.8304 0 0 1 650.24 870.4a384 384 0 1 1 216.9856-212.1728l-1.536 3.584c-5.376 12.5952-10.752 22.8864-14.1824 28.672-10.496 19.3536-13.3632 47.104-7.168 67.328l37.7856 122.4192c2.304 7.5776 5.6832 4.1472-1.8432 1.8432l-122.4192-37.7856c-19.968-6.144-47.616-3.4304-66.4064 6.5024z m173.7216 80.1792c47.0016 14.4896 80.2816-19.0976 65.8432-65.8432l-37.7344-122.368a44.2368 44.2368 0 0 1 2.816-27.0848c3.9936-6.7584 10.2912-18.8416 16.64-33.6384l1.8432-4.3008a435.2 435.2 0 1 0-231.5776 234.496c13.9776-6.1952 25.7536-12.3392 33.1776-16.5888a45.2096 45.2096 0 0 1 26.624-2.4064l122.368 37.7344z"
                      fill="#86909c"
                      p-id="28042"
                    ></path></svg
                  >回复
                </div>
              </div>
            </div>
            <!-- 第一条评论回复 -->
            <div class="fir-re" v-show="current == ine">
              <div
                class="fir-reint"
                contenteditable="true"
                :placeholder="'回复' + item.nick_name + '...'"
                @blur="firbulur"
                :ref="item.comment_id"
              ></div>
              <div class="fir-action">
                <div class="fir-acleft">
                  <div class="smail" @click="addemj">
                    <img
                      src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/5594dbb510a36a6453e2d9a67d13f5ff.svg"
                      alt=""
                    />表情
                    <div class="emjion" v-show="emion">
                      <span
                        :key="item"
                        v-for="item in emio"
                        v-on:click.stop="itemj($event)"
                      >
                        {{ item }}</span
                      >
                    </div>
                  </div>
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="3"
                    :on-exceed="handleExceed"
                    @click="adpic"
                  >
                    <svg
                      data-v-e284b7c0=""
                      aria-hidden="true"
                      width="20"
                      height="20"
                      viewBox="0 0 22 22"
                      class="icon image-icon"
                    >
                      <g data-v-e284b7c0="" fill="none" fill-rule="evenodd">
                        <path data-v-e284b7c0="" d="M1 1h20v20H1z"></path>
                        <g data-v-e284b7c0="" transform="translate(2 3)">
                          <path
                            data-v-e284b7c0=""
                            stroke="#027FFF"
                            stroke-width=".9"
                            d="M2.28.667h13.44c1.075 0 1.947.871 1.947 1.946v10.774a1.947 1.947 0 0 1-1.947 1.946H2.28a1.947 1.947 0 0 1-1.947-1.946V2.613c0-1.075.872-1.946 1.947-1.946zM.333 12.499L5 8l9.01 7.333m-6.343-4.842L10.333 8l7.136 5.914"
                          ></path>
                          <circle
                            data-v-e284b7c0=""
                            cx="13.5"
                            cy="4.5"
                            r="1.5"
                            fill="#027FFF"
                          ></circle>
                        </g>
                      </g>
                    </svg>
                    图片
                  </el-upload>
                </div>
                <div class="fir-acright">
                  <span>Ctrl or ⌘ + Enter</span>
                  <button @click="replitem(item.comment_id)">评论</button>
                </div>
              </div>
            </div>
            <!-- 回复 -->
            <div class="reply" :key="ite.created_at" v-for="ite in item.child">
              <div class="replay-wrap">
                <div class="reply-left">
                  <img :src="item.icon" alt="" />
                </div>
                <div class="reply-right">
                  <div class="replay-top">
                    <div class="dis-anthar">{{ ite.nick_name }}</div>
                    <!-- <div class="lev">Lv3</div> -->
                    <div class="dia-tag"></div>
                  </div>
                  <div class="replay-mid">{{ ite.comment_info }}</div>
                  <div class="replay-end">
                    <span>{{ ite.created_at }}</span>
                    <div class="replay-icon">
                      <div class="praise">
                        <svg
                          t="1624343705331"
                          class="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="7934"
                          width="16"
                          height="16"
                          @click="look"
                        >
                          <path
                            d="M223.3 519.7v400h-100v-400h100m40-40h-180v480h180v-480z m230.8-375.4c2.5 0 5.2 0.1 8 0.4 35.6 3.5 60.9 15.1 77.2 35.6 11.4 14.3 18.9 33.5 22.2 57.2 2.8 20.1 2.6 42.8-0.5 67.6-6.5 50.3-7.6 90.6-3.2 119.8 8.1 54.6 36.6 66.4 52.9 68.6 4.8 0.6 9.9 1 15.8 1 16.9 0 37.8-2.7 61.9-5.7 28.6-3.6 60.9-7.8 90.6-7.8 44.8 0 63.6 9.6 71.5 17.7 2.7 2.8 10.9 11.2 10.2 36.3-0.6 21.4-2.3 41.8-4 61.5-1.7 19.9-3.3 38.8-3.6 57.2-1.6 103.4-6.6 154.9-17.9 183.7-21.9 55.9-47.6 69.8-83.1 89-4.8 2.6-9.7 5.2-14.7 8.1-29 16.3-64.5 18.7-83.1 18.7-10 0-16.5-0.7-17.3-0.8l-2.1-0.3h-2.5l-409.2-1.8V539.7c36.5-17.5 100.9-57 148-133.8 36.6-59.7 41-131.1 44.9-194.1 2.2-35.7 4.3-69.5 12.3-90.1 2.6-6.6 5.5-11.2 8.7-13.5 3.6-2.6 9.3-3.9 17-3.9m0-40c-119.9 0-43.3 200.5-116.9 320.6C316.4 484.2 223.3 513 223.3 513v437.2l449 2s8.6 1.1 22.1 1.1c24.9 0 66.6-3.6 102.7-23.9 42.6-24 84.8-39.1 115.4-117.3 14-35.7 19-92.4 20.6-197.7 0.5-34.8 6.4-73.9 7.5-118.3 2-77.2-56.2-95.1-121.7-95.1-56.9 0-119.3 13.5-152.5 13.5-3.9 0-7.4-0.2-10.4-0.6-16.4-2.2-28.4-42.9-15.4-143.7 9.6-74.2 2.1-192-134.7-205.3-4.1-0.4-8.1-0.6-11.8-0.6z"
                            fill="#86909c"
                            p-id="7935"
                          ></path></svg
                        >12
                      </div>
                      <div class="tock">
                        <svg
                          t="1624344834578"
                          class="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="28041"
                          width="16"
                          height="16"
                          @click="look"
                        >
                          <path
                            d="M691.4048 850.7904A329.8304 329.8304 0 0 1 650.24 870.4a384 384 0 1 1 216.9856-212.1728l-1.536 3.584c-5.376 12.5952-10.752 22.8864-14.1824 28.672-10.496 19.3536-13.3632 47.104-7.168 67.328l37.7856 122.4192c2.304 7.5776 5.6832 4.1472-1.8432 1.8432l-122.4192-37.7856c-19.968-6.144-47.616-3.4304-66.4064 6.5024z m173.7216 80.1792c47.0016 14.4896 80.2816-19.0976 65.8432-65.8432l-37.7344-122.368a44.2368 44.2368 0 0 1 2.816-27.0848c3.9936-6.7584 10.2912-18.8416 16.64-33.6384l1.8432-4.3008a435.2 435.2 0 1 0-231.5776 234.496c13.9776-6.1952 25.7536-12.3392 33.1776-16.5888a45.2096 45.2096 0 0 1 26.624-2.4064l122.368 37.7344z"
                            fill="#86909c"
                            p-id="28042"
                          ></path></svg
                        >回复
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  commentlist,
  articleInfo,
  hot,
  addcomment,
  attention,
  concerndel,
  concernList,
} from "/utils/api.js";
export default {
  name: "Detcontent",
  props: {
    data: Object,
    id: [Number, String],
    quserid: [Number, String],
  },
  data() {
    return {
      emion: false,
      pl: false,
      attstate: true,
      current: -1,
      pingldata: [],
      father_id: "",
      emio: [
        "😀",
        "😁",
        "😂",
        "🤣",
        "😃",
        "😄",
        "😅",
        "😆",
        "😉",
        "😊",
        "😋",
        "😎",
        "😍",
        "😘",
        "🥰",
        "😗",
        "😙",
        "😚",
        "🙂",
        "🤗",
        "🤩",
        "🤔",
        "🤨",
        "😐",
        "😑",
        "😶",
        "🙄",
        "😏",
        "😣",
        "😥",
        "😮",
        "🤐",
        "😫",
        "🥱",
        "😴",
        "😌",
        "😛",
        "😜",
        "😝",
        "🤤",
        "😒",
        "😓",
        "😔",
        "😕",
        "🙃",
        "😤",
        "😟",
        "😞",
        "😖",
        "🙁",
        "😢",
        "😭",
        "😦",
        "😧",
        "😨",
        "😩",
        "🤯",
        "😬",
        "😰",
        "😱",
        "🥵",
        "🥶",
        "😳",
        "🤪",
        "😵",
        "🥴",
        "🤮",
        "🤕",
        "🤢",
        "🤒",
        "😷",
        "🤬",
        "😡",
        "😠",
        "🤧",
        "😇",
        "🥳",
        "🥺",
        "🤠",
        "🤡",
        "🤥",
        "🤫",
        "💀",
        "👺",
        "👹",
        "👿",
        "🤓",
        "🧐",
        "🤭",
        "👻",
        "👽",
        "👾",
        "🤖",
        "💩",
        "😺",
        "😸",
        "🐱‍👤",
        "😾",
        "😿",
        "🙀",
        "😽",
        "😼",
        "😻",
        "😹",
      ],
    };
  },
  computed: {
    wr() {
      //用html里面传的值必须要用return，使用data定义的值就不用return
      return (data) => {
        if (this.$isJson(data)) {
          return JSON.parse(data).content;
        }
        return data;
      };
    },
  },
  methods: {
    //评论贴子
    onepl() {
      this.$refs.oneplbtn.style.cssText = " background-color: #1E80FF;";
    },
    //!关注用户
    attent(userid, ref) {
      console.log(ref);
      if (!localStorage.getItem("token")) {
        this.$message("请先登录");
        this.$store.commit("judgeLogin");
      }
      if (ref == "rattentint") {
        console.log(1);
        concerndel({
          token: this.$store.state.token,
          be_concern_user_id: userid,
        }).then((res) => {
          this.$message("已取消关注");
          this.attstate = true;
        });
      } else {
        console.log(2);
        attention({
          token: this.$store.state.token,
          be_concern_user_id: userid,
        }).then((res) => {
          console.log(res);
          if (res.code == 2000) {
            this.$message("关注成功");
            this.attstate = false;
          }
        });
      }
    },
    look() {
      this.$store.commit("judgeLogin");
    },
    input() {
      this.$refs.int.style.cssText = "border: 1px solid #027fff;";
      this.pl = true;
    },
    plint() {
      this.$refs.int.style.cssText = "border: 1px solid #eee";
      // this.pl = false;
    },
    addemj() {
      if (this.emion == false) {
        this.emion = true;
      } else {
        this.emion = false;
      }
    },
    itemj(e) {
      this.$refs.int.innerHTML += e.target.innerHTML;
      this.emion = true;
    },

    addpic() {},
    //element ui
    handleRemove(file) {
      console.log(file);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    adpic() {
      console.log(45);
    },
    loadComment() {
      let obj = {
        article_id: this.item.article_id,
        father_id: this.item.father_id,
      };
      commentlist(obj).then((res) => {
        let index = res.data.data.findIndex(
          (i) => i.comment_id == this.item.comment_id
        );
        console.log(index);
        this.children = res.data.data[index].child;
        console.log(this.children);
      });
    },
    plitem() {
      let plda = {
        token: this.$store.state.token,
        comment_info: this.$refs.int.innerHTML,
        article_id: this.id,
      };
      if (!localStorage.getItem("token")) {
        this.$message("请先登录");
        this.$store.commit("judgeLogin");
      } else {
        addcomment(plda).then((res) => {
            this.$message("评论成功");
            window.location.reload();
        });
        this.$refs.int.innerHTML = "";
      }
    },
    //回复第一人评论
    firre(id, ind) {
      console.log(ind);
      this.father_id = id.comment_id;
      this.current = ind;
    },
    //回复评论失焦事件
    firbulur() {
      // this.current = -1;
    },
    //点击回复评论按钮
    replitem(fid) {
      let fpl = {
        token: this.$store.state.token,
        comment_info: this.$refs[fid][0].innerHTML,
        article_id: this.id,
        father_id: this.father_id,
      };
      if (!localStorage.getItem("token")) {
        this.$message("请先登录");
        this.$store.commit("judgeLogin");
      }else{
      addcomment(fpl).then((res) => {
          this.$message("回复成功");
          window.location.reload();
      });
    }
      this.$refs[fid][0].innerHTML = "";
    },
  },
  watch: {
    quserid: {
      handler(newer) {
        console.log("点击的发帖用户id" + newer);
        concernList({
          user_id: newer,
        }).then((res) => {
          res.data.my_concern.forEach((ele) => {
            if (ele.user_id == newer) {
              this.attstate = false;
            }
          });
        });
      },
    },
    id: {
      handler(newer) {
        console.log(newer);
        articleInfo({
          token: this.$store.state.token,
          article_id: newer,
        }).then((ress) => {
          ress.data.data.forEach((ele) => {
            let b = new Date().getTime() - ele.created_at * 1000;
            let a = Math.ceil((b % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            if (a > 12) {
              ele.created_at = Math.floor(a / 12) + "天前";
              console.log(ele.created_at);
            } else {
              ele.created_at = a + "小时前";
              console.log(ele.created_at);
            }
          });
          this.pingldata = ress.data.data;
          console.log(this.pingldata);
        });
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.lev {
  width: 22px;
  height: 11px;
  padding: 1px;
  margin: 0 5px;
  background-color: #8cdbf4;
  @include flex(center, center);
  @include font(12px, #fff, 550);
}
.point {
  width: 2px;
  height: 2px;
  border-radius: 2px;
  background-color: #8a9aa9;
  margin: 0px 7px;
}
.content-contaner {
  width: 640px;
  background-color: #fff;
  .de-wrap {
    padding: 16px 24px 0px 20px;
    .anth {
      @include flex(space-between);
      .anth-pho {
        display: flex;
        align-items: center;
        img {
          width: 45px;
          height: 45px;
          border-radius: 100%;
        }
        .anth-name {
          margin-left: 10px;
          display: flex;
          height: 40px;
          flex-direction: column;
          justify-content: space-between;
          article {
            @include font(15px, #2e3135, 700);
          }
          section {
            display: flex;
            align-items: center;
            @include font(13px, #8a9aa9);
          }
        }
      }
      .atten {
        width: 55px;
        height: 26px;
        @include flex(center, center);
        @include font(15px, #6cbd45);
        border: 1px solid #6cbd45;
        border-radius: 2px;
        &:hover {
          cursor: pointer;
        }
      }
      .ratten {
        width: 55px;
        height: 26px;
        @include flex(center, center);
        @include font(15px, #fff);
        border: 1px solid #6cbd45;
        background-color: #6cbd45;
        border-radius: 2px;
        &:hover {
          cursor: pointer;
        }
      }
    }
    .cont-wrap {
      width: 515px;
      margin: 10px auto 10px auto;
      padding: 10px 0;
      overflow: hidden;
    }
  }
  .pra {
    width: 100%;
    height: 34px;
    margin-bottom: 17px;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    @include flex(space-between);
    .praise {
      @include flex(center, center);
      flex-grow: 1;
      padding: 3px;
      border-right: 1px solid #ebebeb;
      svg {
        margin-right: 8px;
      }
      @include font(13px, #8a93a0);
    }
    .tock {
      @extend .praise;
      position: relative;
      .tri {
        position: absolute;
        display: block;
        height: 12px;
        width: 12px;
        background-color: #fff;
        border: 1px solid #ebebeb;
        transform: rotate(45deg);
        bottom: -13px;
        &::after {
          content: "";
          position: absolute;
          top: -1px;
          left: 4px;
          display: block;
          width: 15px;
          transform: rotate(45deg);
          height: 25px;
          background-color: #fff;
        }
      }
    }
    .sher {
      @extend .praise;
      border: none;
    }
  }
  .discuss-wrap {
    width: 600px;
    margin: auto;
    padding-bottom: 15px;
    .dis-top {
      margin-top: 35px;
      section {
        @include font(15px, #8a9aa9);
        @include flex(center);
      }
    }
    .impot {
      padding: 12px 16px;
      margin-top: 10px;
      background-color: #fafbfc;
      @include flex(space-between, flex-start);
      .im-left {
        img {
          width: 30px;
          height: 30px;
          border-radius: 100%;
        }
      }
      .im-right {
        .input {
          border: 1px solid #eee;
          @include font(14px, #333);
          background-color: #fff;
          padding: 8px 10px;
          width: 499px;
          outline: none;
          word-break: break-all;
        }
        .input:empty::before {
          content: attr(placeholder);
          color: #b9b9b9;
        }
        .expr {
          @include flex(space-between);
          height: 31px;
          margin-top: 8px;
          .ex-left {
            display: flex;
            @include font(14px, #027fff);
            .smail {
              @include flex(none, center);
              position: relative;
              margin-right: 15px;
              img {
                margin-right: 3px;
              }
              .emjion {
                width: 286px;
                padding: 12px;
                position: absolute;
                top: 32px;
                background-color: #fff;
                display: grid;
                grid-template-columns: repeat(auto-fill, 10%);
                grid-template-rows: auto;
                box-shadow: 0 0 15px rgb(223, 223, 223);
                flex-wrap: wrap;
                line-height: 26px;
                letter-spacing: 5px;
                &::before {
                  content: "";
                  width: 0;
                  height: 0;
                  position: absolute;
                  top: -8px;
                  left: 45px;
                  border-left: 8px solid transparent;
                  border-right: 8px solid transparent;
                  border-bottom: 8px solid rgb(255, 255, 255);
                }
                span {
                  font-size: 17px;
                }
              }
            }
            .upload-demo {
              width: 55px;
              position: relative;
              text-align: right;
              svg {
                margin-right: 3px;
                left: 2px;
                position: absolute;
              }
            }
          }
          .ex-right {
            span {
              @include font(14px, #909090);
            }
            button {
              width: 61px;
              height: 31px;
              background-color: #97c9fd;
              border: none;
              @include font(16px, #fff);
              border-radius: 2px;
              margin-left: 5px;
              &:hover {
                cursor: pointer;
              }
            }
          }
        }
      }
    }
    .dis-item {
      width: 542px;
      margin: 15px 0 0 auto;
      @include font(12px, #333);
      .dis-first {
        @include flex(space-between, flex-start);
        .f-left {
          height: 100%;
          img {
            width: 32px;
            height: 32px;
            border-radius: 100%;
          }
        }
        .f-right {
          width: 500px;
          border-bottom: 1px solid #f1f1f1;
          padding-bottom: 10px;
          .f-r-top {
            display: flex;
            align-items: center;
            .dia-tag {
              @include font(12px, #8a9aa9);
            }
          }
          //第一人评论
          .f-r-mid {
            margin: 10px 0;
          }
          .f-r-end {
            height: 16px;
            margin-top: 10px;
            color: #8a9aa9;
            @include flex(space-between);
            padding-bottom: 10px;
            .end-icon {
              @include flex(space-between);
              .praise {
                width: 90px;
                @include flex(center);
                svg {
                  margin-right: 5px;
                }
              }
              .tock {
                @include flex(center);
                svg {
                  margin-right: 5px;
                }
                &:hover {
                  cursor: pointer;
                }
              }
            }
          }
          .fir-re {
            padding: 10px;
            background-color: #fafbfc;
            .fir-reint {
              @include font(14px, #333);
              background-color: #fff;
              border: 1px solid #027fff;
              padding: 8px 10px;
              border-radius: 2px;
              outline: none;
              word-break: break-all;
            }
            .fir-reint:empty::before {
              content: attr(placeholder);
              color: #b9b9b9;
            }
            .fir-action {
              @include flex(space-between);
              padding: 8px 10px;
              .fir-acleft {
                display: flex;
                @include font(14px, #027fff);
                .smail {
                  @include flex(none, center);
                  position: relative;
                  margin-right: 15px;
                  img {
                    margin-right: 3px;
                  }
                  .emjion {
                    width: 286px;
                    padding: 12px;
                    position: absolute;
                    top: 32px;
                    background-color: #fff;
                    display: grid;
                    grid-template-columns: repeat(auto-fill, 10%);
                    grid-template-rows: auto;
                    box-shadow: 0 0 15px rgb(223, 223, 223);
                    flex-wrap: wrap;
                    line-height: 26px;
                    letter-spacing: 5px;
                    &::before {
                      content: "";
                      width: 0;
                      height: 0;
                      position: absolute;
                      top: -8px;
                      left: 45px;
                      border-left: 8px solid transparent;
                      border-right: 8px solid transparent;
                      border-bottom: 8px solid rgb(255, 255, 255);
                    }
                    span {
                      font-size: 17px;
                    }
                  }
                }
                .upload-demo {
                  width: 55px;
                  position: relative;
                  text-align: right;
                  svg {
                    margin-right: 3px;
                    left: 2px;
                    position: absolute;
                  }
                }
              }
              .fir-acright {
                span {
                  @include font(14px, #909090);
                }
                button {
                  width: 61px;
                  height: 31px;
                  background-color: #97c9fd;
                  border: none;
                  @include font(16px, #fff);
                  border-radius: 2px;
                  margin-left: 5px;
                }
              }
            }
          }
          .reply {
            background-color: #fafbfc;
            width: 100%;
            .replay-wrap {
              padding: 12px 8px 0px 8px;
              @include flex(space-between, flex-start);
              .reply-left {
                img {
                  width: 32px;
                  height: 32px;
                  border-radius: 100%;
                }
              }
              .reply-right {
                width: 434px;
                .replay-top {
                  display: flex;
                  align-items: center;
                  .dia-tag {
                    color: #8a9aa9;
                  }
                }
                .replay-mid {
                  margin: 10px 0;
                }
                .replay-end {
                  @include flex(space-between);
                  color: #8a9aa9;
                  .replay-icon {
                    display: flex;
                    height: 20px;
                    .praise {
                      width: 80px;
                      @include flex(none, center);
                      svg {
                        margin-right: 5px;
                      }
                    }
                    .tock {
                      @include flex(none, center);
                      svg {
                        margin-right: 5px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>